<template>
  <div class="role_mian">
    <el-row>
      <el-col :span="18">
        <div class="grid-content bg-purple">
          <div class="role_list">
            <div class="role_list_title">
              <span>角色列表</span>
            </div>
            <div class="add_role_button" v-if="isauth('role_add')">
              <el-button @click="addrole()" type="primary" size="mini" icon="el-icon-plus">新增角色</el-button>
            </div>
            <div class="role_table">
              <el-table
                v-loading="dataListLoading"
                :data="tableData"
                highlight-current-row
                @row-click="rowClick"
                style="width: 100%"
                :header-cell-style="headFirst"
                :cell-style="(res) => headFirst_col(res, [])"
              >
                <el-table-column prop="name" label="角色名称" width="180"></el-table-column>
                <el-table-column prop="roleDescription" label="角色描述" width="180"></el-table-column>
                <el-table-column prop="createrName" label="创建人" width="180"></el-table-column>
                <el-table-column label="操作" v-if="isauth('role_update') || isauth('role_delete')">
                  <template slot-scope="scope">
                    <div v-if="isAuthRole(scope.row)">
                      <el-button
                        type="text"
                        size="mini"
                        @click.stop="addOrUpdateHandle(scope.row)"
                        v-if="isauth('role_update')"
                      >修改</el-button>
                      <el-button
                        type="text"
                        size="mini"
                        style="color:red"
                        @click.stop="deleteHandle(scope.row)"
                        v-if="isauth('role_delete')"
                      >删除</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="page">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChangepage"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="recordCount"
              ></el-pagination>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <div class="rolelistshow">
            <div class="rolelistshow_title">权限树</div>
            <div class="rolelistshow_tree">
              <el-tree
                :default-checked-keys="idArr"
                :data="roledatas"
                show-checkbox
                node-key="id"
                :props="defaultProps"
              ></el-tree>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 新增弹窗 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="pageinit"
      @refrolelist="checkrole"
      :treedata="treedata"
      :userGuid="userGuid"
    ></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from "./role-add-update";
import { treeDataTranslate } from "@/utils";
export default {
  data() {
    return {
      tableData: [],
      pageSize: 10,
      pageNum: 1,
      totalPage: 0,
      recordCount: 0,
      currentPage: 1,
      dataListLoading: false,
      addOrUpdateVisible: false,
      treedata: [],
      userGuid: "",
      roledatas: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      idArr: [],
      roleid: "",
    };
  },
  components: {
    AddOrUpdate,
  },
  created() {
    this.userGuid = sessionStorage.getItem("administrator");
    // 单位类型
    this.unitType = this.$store.state.user.unitType;
    // 用户类型
    this.userType = sessionStorage.getItem("userType");
  },
  mounted() {
    this.roledatalist();
    this.pageinit();
  },
  watch: {
    idArr() {},
  },
  methods: {
    // 判断是否有权限
    isAuthRole(row) {
      console.log(row);
      let is = false;
      if (this.unitType == 1) {
        if (row.createrGuid == this.userGuid) {
          is = true;
        }
      } else if (this.unitType == 50) {
        if (this.userType == 1) {
          is = true;
        } else if (this.userType == 50) {
          if (row.createrGuid == this.userGuid) {
            is = true;
          }
        }
      } else if (this.unitType == 100) {
        if (this.userType == 100) {
          if (row.createrGuid == this.userGuid) {
            is = true;
          }
        } else {
          is = true;
        }
      }
      console.log(is);
      return is;
    },
    rowClick(row) {
      if (this.roleid === row.pkRoleId) {
        return;
      }
      this.roleid = row.pkRoleId;
      this.checkrole(row);
    },
    //递归添加
    recursiveget(roledatas) {
      for (var i in roledatas) {
        roledatas[i].disabled = true;
        if (roledatas[i].children) {
          this.recursiveget(roledatas[i].children);
        }
      }
    },
    //获取递归id
    getId(roledatas) {
      roledatas.forEach((ele) => {
        if (ele.flag == true) {
          this.idArr.push(ele.id);
          if (ele.children && ele.children.length > 0) {
            this.getId(ele.children);
          }
        }
      });
    },
    //角色查询权限
    checkrole(val) {
      this.$http({
        url: this.$http.adornUrl("/sys/get-permission-tree"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            roleId: val.pkRoleId,
            userGuid: val.createrGuid,
          },
          messageType: 0,
        }),
      }).then(({ data }) => {
        // console.log(data)
        // return
        if (data.messageCode === 200) {
          this.roledatas = data.messageContent;
          this.recursiveget(this.roledatas);
          this.idArr = [];
          this.getId(this.roledatas);
          return;
        } else {
          this.$message.error(data.errorMessage);
          this.idArr = [];
          this.roledatas = [];
        }
      });
    },
    //角色列表
    pageinit() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/sys/get-role-page"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: {
              unitGuid: this.$store.state.user.changeschoolid,
              userGuid: this.userGuid,
            }, // 获取单位下的角色
          },
          messageType: 0,
        }),
      }).then(({ data }) => {
        // console.log(data)
        this.dataListLoading = false;
        if (data.messageCode === 200) {
          this.tableData = data.messageContent.data;
          this.recordCount = data.messageContent.recordCount;
          this.currentPage = data.messageContent.pageNum;
          return;
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
    //角色树状图数据
    roledatalist() {
      this.treedata = [];
      this.$http({
        url: this.$http.adornUrl("/sys/get-user-permission-tree"),
        method: "post",
        data: this.$http.adornData({
          messageContent: this.userGuid,
          messageType: 0,
        }),
      }).then(({ data }) => {
        // console.log(data)
        if (data.messageCode === 200) {
          this.treedata = data.messageContent;
        } else {
          this.$message.error(data.errorMessage);
          return;
        }
      });
    },
    //新增角色
    addrole() {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.addinit();
      });
    },
    //修改
    addOrUpdateHandle(row) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.editinit(row);
      });
    },
    //删除角色
    deleteHandle(row) {
      console.log(row);
      this.$confirm("此操作将删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deletconfirm(row);
        })
        .catch(() => {
          
        });
    },
    //删除角色接口
    deletconfirm(row) {
      this.$http({
        url: this.$http.adornUrl("/sys/del-system-role"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            operationGuid: this.userGuid,
            pkRoleId: row.pkRoleId,
          },
          messageType: 0,
        }),
      }).then(({ data }) => {
        if (data.messageCode === 200) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.idArr = [];
          this.roledatas = [];
          this.pageinit();
        } else {
          this.$message.error(data.errorMessage);
          return;
        }
      });
    },
    //分类页
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageinit();
    },
    handleCurrentChangepage(val) {
      this.pageNum = val;
      this.pageinit();
    },
    //获取列表
    getDataList() {},
  },
};
</script>

<style lang="scss" scoped>
.role_mian {
  padding: 10px;
  // height: 86vh;
  // padding: 10px;
  // height: 100%;
  .bg-purple {
    // border-right: 3px solid #e5e9f2;
    //  padding: 10px;
    // height: 100%;
    //  background: #e5e9f2;
    .role_list {
      width: 100%;
      // height: 100%;
      .role_list_title {
        // text-indent: 22px;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #e5e9f2;
        color: #909399;
      }
      .add_role_button {
        border-bottom: 1px solid #e5e9f2;
        // text-indent: 20px;
        height: 40px;
        line-height: 40px;
      }
      .role_table {
        padding-top: 10px;
        // padding-bottom: 10px;
      }
    }
    .page {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .bg-purple-light {
    // background: #e5e9f2;
    height: 80vh;
    overflow-y: auto;
    padding-left: 5px;
    border-left: 3px solid #e5e9f2;
    //滚动条的宽度
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    //滚动条的滑块
    &::-webkit-scrollbar-thumb {
      background-color: #a1a3a9;
      border-radius: 3px;
    }
    .rolelistshow {
      // padding-left: 20px;
      //  border-left: 3px solid #e5e9f2;
      // height: 100%;
      color: #909399;
      font-size: 16px;
      .rolelistshow_title {
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-bottom: 1px solid #e5e9f2;
      }
      .rolelistshow_tree {
        padding-top: 20px;
        display: flex;
        justify-content: center;
        .el-tree {
          min-width: 100%;
          font-size: 14px;
          display: inline-block;
        }
        .tree {
          overflow-y: scroll;
          overflow-x: auto;
          // height: 200px;
          /*width:200px;*/
          // border: 1px solid blue;
        }
      }
    }
  }
}
</style>